<template>
    <div class="home-container">
        <div class="header-group">
            <div class="address-group">
                <i class="iconfont icon-dingwei1"/>
                <span class="address">贵阳</span>
                <i class="iconfont icon-xiangyoujiantou"/>
            </div>
            <div class="search-group">
                <van-search @input="Search" placeholder="请输入搜索关键词" v-model="value"/>
            </div>
        </div>

        <div class="main-group" ref="main">
            <div>
                <h2>附近商家</h2>
                <el-row>
                    <el-col :span="7">
                        <el-dropdown style="margin: 0 5px 0 10px;" @command="dropdownCommand">
                            <el-button type="primary">
                                {{ selectedOptions[selectedValue] }} <i class="iconfont icon-xiangxia5"
                                                                        style="margin-left: 5px"/>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :command="k" v-for="(v, k) in selectedOptions">{{
                                        v
                                        }}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-col>
                    <el-col :span="5" style="margin-left: 5px;">
                        <el-button>距离最近</el-button>
                    </el-col>
                    <el-col :span="5" style="margin-left: 5px;">
                        <el-button>品质联盟</el-button>
                    </el-col>
                    <el-col :span="5" style="margin-left: 5px;">
                        <el-button>筛选<i style="margin-left: 5px" class="iconfont icon-loudou"/></el-button>
                    </el-col>

                </el-row>
                <div class="merchant-list">
                    <div class="merchant-item" v-for="(e , k) in merchants" @click="gotoMerchant(e.id)" :key="e.id">
                        <img :src="e.logo" class="logo" :alt="k">
                        <div class="merchant-info">
                            <div class="merchant-name">
                                {{ e.name }}
                            </div>
                            <div class="rate">
                                <el-row style="margin: 10px 0 10px 0">
                                    <el-col :span="24">
                                        <van-rate v-model="rate_value" size="12"/>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <van-tag plain type="primary">飞机专送</van-tag>
                                        <van-tag plain type="primary" style="margin: 0 5px 0 5px;">包邮</van-tag>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'

export default {
    name: "Home",
    data() {
        return {
            value: '',
            rate_value: 0,
            selectedValue: 0,
            selectedOptions: ['综合排序', '好评优先', '销量最高', '距离最近'],
            merchants: [],
            scroll: null,
            isPullUpLoad: false,
            page: 1,
            maxPage: 1,
            fn: null ,

        }
    },
    methods: {
        debounce(fn){
            let timer = null;
            return function (value){
                clearTimeout(timer)
                timer = setTimeout(() => {
                    fn(value);
                }, 500);
            }

        },
        Search(){
            if(!this.fn){
                this.fn = this.debounce((valueArg) => {
                    console.log(valueArg)
                    this.$http.get(`search`,{
                        params: {
                            'q': this.value
                        }
                    }).then(resp => {
                        console.log(resp)
                        this.merchants = resp.data;
                    }).catch(err => {
                        console.log(err)
                    })
                });
            }
            this.fn(this.value);
        },
        dropdownCommand(e) {
            this.selectedValue = e
        },
        gotoMerchant(i) {
            this.$router.push(`/merchant/${i}`)
        },
        initBscroll() {
            this.scroll = new BScroll(this.$refs.main, {
                scrollY: true,
                click: true,
                pullUpLoad: {
                    threshold: 0
                }
            })

            this.scroll.on('pullingUp', this.pullingUpHandler)
        },
        async pullingUpHandler() {
            this.isPullUpLoad = true

            await this.requestData()

            this.scroll.finishPullUp()
            this.scroll.refresh()
            this.isPullUpLoad = false
        },
        async requestData() {

            if(this.page >= this.maxPage){
                return false;
            }

            try {
                this.$http.get(`merchant`,{
                    params:{
                        page: this.page++
                    }
                }).then(resp => {
                    console.log('get data')
                    console.log(resp.data.results)
                    this.merchants = this.merchants.concat(resp.data.results);
                    this.scroll.refresh();
                }).catch(err => {
                    console.log(err)
                })

            } catch (err) {
                // handle err
                console.log(err)
            }
        },

    },
    mounted() {
        BScroll.use(Pullup)
        this.initBscroll()
        this.$http.get(`merchant`,{
            params:{
                page: 1
            }
        }).then(resp => {
            this.maxPage = resp.data.count / 8 + 1;
            console.log(Math.floor(this.maxPage))
            this.merchants = resp.data.results
            this.scroll.refresh();
        }).catch(err => {
            console.log(err)
        })
    },
    watch: {
        value(oldVal, newVal){
            console.log(newVal)
            if(oldVal === ''){
                this.$http.get(`merchant`,{
                    params:{
                        page: 1
                    }
                }).then(resp => {
                    this.merchants = resp.data.results
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
}
</script>

<style scoped lang="scss">

.header-group {
  background-color: #1c1b20;
  padding: 20px 12px 10px;

  .address-group {
    color: white;
    font-size: 16px;
    font-weight: 500;

    .address {
      margin-left: 5px;
      margin-right: 5px;
    }
  }

  .search-group {
    margin-top: 10px;

    .van-search {
      padding: 0;
    }
  }
}

.main-group {
  height: 720px;
  overflow: hidden;

  h2 {
    padding: 20px 10px;
    font-weight: 500;
    font-size: 16px;
  }

  .merchant-list {
    margin-bottom: 40px;

    .merchant-item {
      padding: 10px;
      display: flex;

      .logo {
        height: 70px;
        width: 70px;
        margin-right: 20px;
      }

      .merchant-name {
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
}
</style>
